<template>
  <div id="sift">
    <van-popup
      v-model="show"
      position="top"
      class="popup"
      :style="{ height: '55%' }"
      transition="trans"
    >
      <h3 class="title">距离</h3>
      <van-grid
        direction="horizontal"
        :column-num="2"
        :border="false"
        gutter="10px"
      >
        <van-grid-item
          v-for="(item, index) in distanceList"
          :key="index"
          :text="item.name"
          @click="selectDistance(item.data)"
          :class="{ active: distanceStatus === item.data }"
        />
      </van-grid>
      <h3>评分</h3>
      <van-grid
        direction="horizontal"
        :column-num="2"
        :border="false"
        gutter="10px"
      >
        <van-grid-item
          v-for="(item, index) in scoreList"
          :key="index"
          :text="item.name"
          @click="setScore(item.data)"
          :class="{ active: search.scoreRange === item.data }"
        />
      </van-grid>
      <div class="footer">
        <van-button type="danger" class="rset" @click="reset" round
          >清除</van-button
        >
        <van-button type="danger" class="submit" round @click="submit"
          >确定</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['distanceStatus', 'search'], // 距离 search里面的评分
  watch: {
    // 当弹框发生改变时,推荐和筛选默认选中红色就会消失
    show (newVal) {
      if (!newVal) {
        this.$parent.siftStatus = false
      }
    }
  },
  data () {
    return {
      show: false,
      distanceList: [
        { name: '由远及近', data: 'asc' },
        { name: '由近及远', data: 'desc' }
      ],
      scoreList: [
        { name: '4分-5分', data: '4-5' },
        { name: '3分-3.9分', data: '3-3.9' },
        { name: '2分-2.9分', data: '2-2.9' },
        { name: '1分-1.9分', data: '1-1.9' },
        { name: '一分以下', data: '0-0.9' }
      ]
    }
  },
  methods: {
    // 清除 关闭弹窗 距离 评分 推荐 清空
    reset () {
      this.show = false
      this.$emit('reset', {
        scoreStatus: '',
        distanceStatus: '',
        scoreRange: ''
      })
    },
    selectDistance (distance) {
      this.$emit('selectDistance', distance)
    },
    setScore (value) {
      this.search.scoreRange = value
      this.$emit('selectScore')
    },
    // 确定直接关闭弹框
    submit () {
      this.show = false
      // this.$emit('selectScore', this.scoreRange)
    }
  }
}
</script>

<style lang="less" scoped>
#sift {
  .popup {
    top: 92px;
    padding: 0 15px 15px;
    h3 {
      margin: 20px 0;
      font-size: 18px;
    }
    .title {
      margin: 0 0 20px;
    }
  }
  /deep/ .van-overlay {
    top: 92px;
  }
  /deep/ .van-grid-item__content {
    padding: 7px;
    background-color: #f9f8f8;
    border-radius: 5px;
  }
  .active /deep/ .van-grid-item__content {
    border: 1px solid #e40137;
    background-color: #ffe2e9;
    /deep/ .van-grid-item__text {
      color: #e40137;
    }
  }
  .trans-enter-active {
    transition: all 0.5s;
  }

  .trans-leave-active {
    transition: all 0.5s;
  }
  .trans-leave-to,
  .trans-enter {
    opacity: 0;
  }
  .footer {
    margin-top: 30px;
    display: flex;
    .rset {
      flex: 1;
      margin-right: 10px;
      border: 1px solid transparent;
      background-color: #ffe2e9;
      color: #e40137;
    }
    .submit {
      flex: 2;
    }
    /deep/ .van-button--round {
      border-radius: 8px;
    }
  }
}
</style>
